<template>
  <div>
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">数据总览</div>
          <div class="box-subtitle">{{ getCurrentDateTime() }} 更新</div>
        </div>
        <div class="times">
          <el-date-picker v-model="paramsQuery.yearMonth" format="yyyy-MM" placeholder="选择日期" type="month"
            value-format="yyyy-MM" @change="selectTime" />
        </div>
      </div>
      <div class="top_header" style="margin-top: 16px;">
        <!-- 1. 顶部数据卡片 -->
        <div class="card-row-wrapper">
          <el-row type="flex" class="card-row" :gutter="0">
            <el-col class="card-col">
              <div class="safety-card" style="background: linear-gradient(351.54deg, #4468FD -7.1%, #49ADFF 93.49%);">
                <div class="card-group">
                  <div class="card-title">本年实际/计划检查</div>
                  <div class="card-value">
                    {{ YearActual }}/{{ YearPlan }}<span class="unit">次</span>
                  </div>
                </div>
                <div class="card-group group-shadow">
                  <div class="group-row">
                    <span class="card-subtitle-group">本月实际</span>
                    <span class="card-subvalue-group">
                      {{ MonthActual }}<span class="unit">次</span>
                    </span>
                  </div>
                  <div class="group-row">
                    <span class="card-subtitle-group">本月计划</span>
                    <span class="card-subvalue-group">
                      {{ MonthPlan }}<span class="unit">次</span>
                    </span>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col class="card-col">
              <div class="safety-card" style="background: linear-gradient(349.2deg, #02ADED 6.47%, #21DCFA 91.94%);
">
                <div class="card-group">
                  <div class="card-title">本年隐患整改/发现</div>
                  <div class="card-value">
                    {{ thisYearRectified }}/{{ thisYearFound
                    }}<span class="unit">个</span>
                  </div>
                </div>
                <div class="card-group group-shadow">
                  <div class="group-row">
                    <span class="card-subtitle-group">本月整改</span>
                    <span class="card-subvalue-group">
                      {{ thisMonthRectified }}<span class="unit">个</span>
                    </span>
                  </div>
                  <div class="group-row">
                    <span class="card-subtitle-group">本月发现</span>
                    <span class="card-subvalue-group">
                      {{ thisMonthFound }}<span class="unit">个</span>
                    </span>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col class="card-col">
              <div class="safety-card" style="background: linear-gradient(351.54deg, #0AD0A1 -7.1%, #69D488 93.49%);
">
                <div class="card-group">
                  <div class="card-title">本年完成特种作业</div>
                  <div class="card-value">
                    {{ thisYearCompleted }}<span class="unit">次</span>
                  </div>
                </div>
                <div class="card-group">
                  <div class="card-subtitle card-title">本月完成特种作业</div>
                  <div class="card-subvalue">
                    {{ thisMonthCompleted }}<span class="unit">次</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col class="card-col">
              <div class="safety-card" style="background: linear-gradient(351.54deg, #9666F7 -7.1%, #B38FFA 93.49%);
">
                <div class="card-group">
                  <div class="card-title">临期设备证照</div>
                  <div class="card-value">
                    {{ tempDeviceCount }}<span class="unit">个</span>
                  </div>
                </div>
                <div class="card-group">
                  <div class="card-subtitle card-title">临期企业证照</div>
                  <div class="card-subvalue">
                    {{ historicalCompanyCount }}<span class="unit">个</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
    <div>
      <!-- 2. 表格 + 饼图 -->
      <el-row class="table-chart-row">
        <el-col :span="13">
          <div class="box-padding-16" style="margin-top: 0;">
            <div class="box-padding-16-flex-left" style="margin-bottom: 16px;">
              <div class="line"></div>
              <div class="box-title">隐患统计</div>
            </div>
            <el-table :data="hiddenTroubleData" max-height="243px" size="small">
              <el-table-column align="center" label="序号" type="index" width="50" />
              <el-table-column align="center" label="区域" prop="regionName" width="80" />
              <el-table-column align="center" label="本年隐患数" prop="totalThisYear" />
              <el-table-column align="center" label="未整改数量" prop="notRectified" />
              <el-table-column align="center" label="本月新增" prop="newThisMonth" />
              <el-table-column align="center" label="逾期" prop="overdue" />
              <el-table-column align="center" label="重大隐患" prop="majorHazard" />
            </el-table>
          </div>
          <div class="box-padding-16">
            <div class="box-padding-16-flex-left" style="margin-bottom: 16px;">
              <div class="line"></div>
              <div class="box-title">环境监测数据</div>
            </div>
            <div class="data-card" style="height: 350px;width: 100%;">
              <div ref="environmentChart" class="chart-container"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="box-padding-16" style="margin-top: 0;margin-left: 0;margin-right: 0;width: calc(100% - 16px);">
            <div class="box-padding-16-flex-left" style="margin-bottom: 16px;">
              <div class="line"></div>
              <div class="box-title">隐患和特种作业分布</div>
            </div>
            <el-row :gutter="15" style="height: 340px">
              <el-col :span="12" style="height: 100%">
                <div class="data-card pie-box">
                  <div class="chart-title">本年隐患位置分布图</div>
                  <div ref="positionChart" class="small-chart"></div>
                </div>
              </el-col>
              <el-col :span="12" style="height: 100%">
                <div class="data-card pie-box">
                  <div class="chart-title">本年隐患来源分布图</div>
                  <div ref="sourceChart" class="small-chart"></div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="15" style="height: 340px">
              <el-col :span="12" style="height: 100%">
                <div class="data-card pie-box">
                  <div class="chart-title">本年隐患级别分布图</div>
                  <div ref="levelChart" class="small-chart"></div>
                </div>
              </el-col>
              <el-col :span="12" style="height: 100%">
                <div class="data-card pie-box">
                  <div class="chart-title">本年特种作业分布图</div>
                  <div ref="workChart" class="small-chart"></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!-- 4. 隐患明细表格（无分页） -->
      <el-row class="detail-row">
        <el-col :span="24">
          <div class="box-padding-16" style="margin-top: 0;">
            <div class="box-padding-16-flex-left" style="margin-bottom: 16px;">
              <div class="line"></div>
              <div class="box-title">隐患明细</div>
            </div>
            <el-table :data="detailData" size="small" style="width: calc(100% - 32px);margin: 0 32px;">
              <el-table-column align="center" label="序号" type="index" width="50" />
              <el-table-column align="center" label="隐患详情" min-width="140" prop="event" show-overflow-tooltip />
              <el-table-column align="center" label="隐患状态" min-width="100" prop="status">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == '未整改'" style="color: red;">未整改</div>
                  <div v-else>{{ scope.row.status }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="隐患级别" min-width="80" prop="level" />
              <el-table-column align="center" label="发生位置" min-width="100" prop="location" />
              <el-table-column align="center" label="隐患来源" min-width="100" prop="source" />
              <el-table-column align="center" label="发生时间" min-width="160" prop="overdueDay" />
              <el-table-column align="center" label="图片/视频" min-width="80" prop="mediaUrls">
                <template slot-scope="scope">
                  <el-image
                    style="height: 40px;width: 40px;"
                    :src="scope.row.mediaUrls.length > 0 ? scope.row.mediaUrls[0] : ''"
                    :preview-src-list="scope.row.mediaUrls">
                  </el-image>
<!--                  <img :src="scope.row.mediaUrls.length > 0 ? scope.row.mediaUrls[0] : ''" alt=""-->
<!--                    style="height: 40px;width: 40px;">-->
                  <!-- <span>{{ scope.row.mediaUrls.length>0 ? scope.row.mediaUrls[0] : "无" }}</span> -->
                </template>
              </el-table-column>
              <el-table-column align="center" label="当前处理人" min-width="100" prop="currentHandler" />
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  checkData,
  hazardData,
  specialOperation,
  count,
  regionList,
  monthLine,
  locationPie,
  sourcePie,
  levelPie,
  specialOperationPie,
  details,
} from "@/api/home.js";
export default {
  name: "SafetyDashboard",
  data() {
    return {
      YearActual: 0,
      YearPlan: 0,
      MonthActual: 0,
      MonthPlan: 0,
      thisMonthFound: 0,
      thisMonthRectified: 0,
      thisYearFound: 0,
      thisYearRectified: 0,
      thisMonthCompleted: 0,
      thisYearCompleted: 0,

      historicalCompanyCount: 0,
      tempDeviceCount: 0,

      paramsQuery: {
        yearMonth:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1).toString().padStart(2, "0"),
      },
      chartInstances: {},
      /* 上方统计表格数据 */
      hiddenTroubleData: [
        {
          index: 1,
          area: "边坡",
          total: 12,
          unfixed: 1,
          monthlyNew: 0,
          overdue: 0,
          major: 0,
        },
        {
          index: 2,
          area: "采区",
          total: 11,
          unfixed: 1,
          monthlyNew: 0,
          overdue: 0,
          major: 0,
        },
        {
          index: 3,
          area: "运矿道路",
          total: 9,
          unfixed: 0,
          monthlyNew: 1,
          overdue: 0,
          major: 0,
        },
        {
          index: 4,
          area: "加工区",
          total: 8,
          unfixed: 0,
          monthlyNew: 1,
          overdue: 0,
          major: 0,
        },
        {
          index: 5,
          area: "厨房",
          total: 7,
          unfixed: 0,
          monthlyNew: 0,
          overdue: 0,
          major: 0,
        },
        {
          index: 6,
          area: "办公楼",
          total: 6,
          unfixed: 1,
          monthlyNew: 2,
          overdue: 0,
          major: 0,
        },
        {
          index: 7,
          area: "发运楼",
          total: 5,
          unfixed: 1,
          monthlyNew: 1,
          overdue: 0,
          major: 0,
        },
      ],
      /* 隐患明细数据（与图片顺序一致） */
      detailData: [
        {
          id: 1,
          detail: "边坡垮塌",
          status: "未整改",
          level: "重大",
          location: "边坡",
          source: "上级检查",
          time: "2025-09-11 11:12:12",
          media: 1,
          handler: "xxx",
          mediaUrls: []
        },
        {
          id: 2,
          detail: "采区未整改",
          status: "未整改",
          level: "较大",
          location: "采区",
          source: "日常巡检",
          time: "2025-09-11 11:12:12",
          media: 1,
          handler: "xxx",
          mediaUrls: []
        },
        {
          id: 3,
          detail: "运矿道路未整改",
          status: "未整改",
          level: "一般",
          location: "运矿道路",
          source: "随手拍",
          time: "2025-09-11 11:12:12",
          media: 0,
          handler: "xx",
          mediaUrls: []
        },
        {
          id: 4,
          detail: "加工区整改中",
          status: "整改中",
          level: "一般",
          location: "加工区",
          source: "随手拍",
          time: "2025-09-11 11:12:12",
          media: 0,
          handler: "xxx",
          mediaUrls: []
        },
        {
          id: 5,
          detail: "厨房整改中",
          status: "整改中",
          level: "一般",
          location: "厨房",
          source: "随手拍",
          time: "2025-09-11 11:12:12",
          media: 0,
          handler: "xxx",
          mediaUrls: []
        },
        {
          id: 6,
          detail: "办公楼验收中",
          status: "验收中",
          level: "轻微",
          location: "办公楼",
          source: "随手拍",
          time: "2025-09-11 11:12:12",
          media: 0,
          handler: "xx",
          mediaUrls: []
        },
        {
          id: 7,
          detail: "发运楼验收中",
          status: "验收中",
          level: "轻微",
          location: "发运楼",
          source: "随手拍",
          time: "2025-09-11 11:12:12",
          media: 0,
          handler: "xx",
          mediaUrls: []
        },
      ],
      environmentData: {
        xAxis: Array.from({ length: 30 }, (_, i) => i + 1),
        series: [
          {
            name: "PM10",
            type: "line",
            data: this.generateRandomData(30, 10, 30),
            symbol: "none",
            symbolSize: 6,
          },
          {
            name: "PM2.5",
            type: "line",
            data: this.generateRandomData(30, 20, 45),
            symbol: "none",
            symbolSize: 6,
          },
          {
            name: "噪音",
            type: "line",
            data: this.generateRandomData(30, 40, 65),
            symbol: "none",
            symbolSize: 6,
          },
          {
            name: "湿度",
            type: "line",
            data: this.generateRandomData(30, 50, 80),
            symbol: "none",
            symbolSize: 6,
          },
        ],
        colors: ["#1890ff", "#00c896", "#faad14", "#fa8c16"],
      },
      pieData: {
      position: { data: [], colors: [] },
      source: { data: [], colors: [] },
      level: { data: [], colors: [] },
      work: { data: [], colors: [] },
    },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initEnvironmentChart();
      setTimeout(() => {
        this.initPositionChart();
        this.initSourceChart();
        this.initLevelChart();
        this.initWorkChart();
      }, 100);
    });
    window.addEventListener("resize", this.handleResize);
  },
  created() {
    this.loadAllData();
  },
  beforeDestroy() {
    Object.values(this.chartInstances).forEach((i) => i && i.dispose());
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    getCurrentDateTime() {
      const now = new Date();

      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要+1
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');

      return `${year}/${month}/${day} ${hours}:${minutes}`;
    },
    selectTime() {
      this.loadAllData();
      this.initPositionChart();
      this.initSourceChart();
      this.initLevelChart();
      this.initWorkChart();
      this.initEnvironmentChart();
    },
    loadAllData() {
      details(this.paramsQuery).then((res) => {
        this.detailData = res.data;
      });
      checkData(this.paramsQuery).then((res) => {
        this.YearActual = res.data.thisYearActual;
        this.YearPlan = res.data.thisYearPlan;
        this.MonthActual = res.data.thisMonthActual;
        this.MonthPlan = res.data.thisMonthPlan;
      });
      hazardData(this.paramsQuery).then((res) => {
        this.thisMonthFound = res.data.thisMonthFound;
        this.thisMonthRectified = res.data.thisMonthRectified;
        this.thisYearFound = res.data.thisYearFound;
        this.thisYearRectified = res.data.thisYearRectified;
      });
      specialOperation(this.paramsQuery).then((res) => {
        this.thisMonthCompleted = res.data.thisMonthCompleted;
        this.thisYearCompleted = res.data.thisYearCompleted;
      });
      count(this.paramsQuery).then((res) => {
        this.historicalCompanyCount = res.data.historicalCompanyCount;
        this.tempDeviceCount = res.data.tempDeviceCount;
      });

      regionList(this.paramsQuery).then((res) => {
        this.hiddenTroubleData = res.data;
      });
    },
    generateRandomData(len, min, max) {
      return Array.from({ length: len }, () =>
        Number((Math.random() * (max - min) + min).toFixed(0))
      );
    },
    initEnvironmentChart() {
      monthLine(this.paramsQuery).then((res) => {
        this.environmentData.xAxis = res.data.map((item) => item.day);
        this.environmentData.series[0].data = res.data.map((item) => item.pm10);
        this.environmentData.series[1].data = res.data.map((item) => item.pm25);
        this.environmentData.series[2].data = res.data.map(
          (item) => item.noise
        );
        this.environmentData.series[3].data = res.data.map(
          (item) => item.humidity
        );
        const chart = echarts.init(this.$refs.environmentChart);
        this.chartInstances.environment = chart;
        chart.setOption({
          color: this.environmentData.colors,
          tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
          legend: { top: "0%", icon: 'circle', },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            top: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.environmentData.xAxis,
            axisLabel: { fontSize: 12 },
          },
          yAxis: {
            type: "value",
            min: 0,
            interval: 20,
            axisLabel: { fontSize: 12 },
          },
          series: this.environmentData.series,
        });
      });
    },
    initPieChart(refName, dataConfig) {
      const gradientColors = [
        {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
            { offset: 0, color: '#FAB2FF' }, { offset: 1, color: '#5644FF' }
          ]
        },
        {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
            { offset: 0, color: '#7AECF8' }, { offset: 1, color: '#48DE94' }
          ]
        },
        {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
            { offset: 0, color: '#FEA492' }, { offset: 1, color: '#FF4C52' }
          ]
        },
        {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
            { offset: 0, color: '#A5A1FF' }, { offset: 1, color: '#1F90FF' }
          ]
        },
        {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
            { offset: 0, color: 'rgba(81, 85, 198, 1)' }, { offset: 1, color: 'rgba(81, 85, 198, .6)' }
          ]
        }
      ];
      const chart = echarts.init(this.$refs[refName]);
      this.chartInstances[refName] = chart;
      // 为每条扇区生成带渐变的 itemColor
      const color = dataConfig.data.map((_, idx) => ({
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: gradientColors[idx % gradientColors.length].colorStops
      }));
      chart.setOption({
        color,
        title: {
          text: dataConfig.title, // 传进来的标题
          left: "center",
          top: 0,
          textStyle: { fontSize: 14, fontWeight: "normal" },
        },
        tooltip: { trigger: "item", formatter: "{b}: {c}个" },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          icon: 'circle',          // ← 关键：圆点
          itemWidth: 10,           // 圆点直径
          itemHeight: 10,          // 圆点直径
          itemGap: 12              // 图例间隔（可选）
        },
        grid: {
          top: '0%', // 调整这个值使图表向上移动
          bottom: '10%',
          left: '10%',
          right: '10%'
        },
        series: [
          {
            type: "pie",
            radius: '55%',
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 4, borderColor: "#fff", borderWidth: 2, color: function (params) {
                return color[params.dataIndex];
              }
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{b}\n{c}个",
              fontSize: 11,
            },
            roseType: 'radius',
            labelLine: { show: true, length: 8, length2: 12 },
            emphasis: {
              label: { show: true, fontSize: 12, fontWeight: "bold" },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: dataConfig.data,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          },
        ],
      });

      this.$nextTick(() => chart.resize());
    },
 initPositionChart() {
    locationPie(this.paramsQuery).then((res) => {
      res.data.forEach((item) => {
        item.name = item.location;
        item.value = item.count;
      });
      this.pieData.position.data = res.data;
      this.pieData.position.colors = ["#1890ff", "#00c896", "#52c41a", "#faad14"];
      // 将图表渲染移到数据返回后
      this.initPieChart("positionChart", this.pieData.position);
    });
  },
 initSourceChart() {
    sourcePie(this.paramsQuery).then((res) => {
      res.data.forEach((item) => {
        item.name = item.source;
        item.value = item.count;
      });
      this.pieData.source.data = res.data;
      this.pieData.source.colors = ["#1890ff", "#00c896", "#52c41a", "#faad14"];
      // 将图表渲染移到数据返回后
      this.initPieChart("sourceChart", this.pieData.source);
    });
  },
 initLevelChart() {
    levelPie(this.paramsQuery).then((res) => {
      res.data.forEach((item) => {
        item.name = item.level;
        item.value = item.count;
      });
      this.pieData.level.data = res.data;
      this.pieData.level.colors = ["#1890ff", "#00c896", "#52c41a", "#faad14"];
      // 将图表渲染移到数据返回后
      this.initPieChart("levelChart", this.pieData.level);
    });
  },

  initWorkChart() {
    specialOperationPie(this.paramsQuery).then((res) => {
      res.data.forEach((item) => {
        item.name = item.type;
        item.value = item.count;
      });
      this.pieData.work.data = res.data;
      this.pieData.work.colors = ["#1890ff", "#00c896", "#52c41a", "#faad14"];
      // 将图表渲染移到数据返回后
      this.initPieChart("workChart", this.pieData.work);
    });
  },
    handleResize() {
      Object.values(this.chartInstances).forEach((i) => i && i.resize());
    },
  },
};
</script>

<style scoped>
.times {
  width: 120px;
  height: 24px;
  display: flex;
  align-items: center;
}

.card-row-wrapper {
  width: 100%;
  overflow: hidden;
}

.times ::v-deep .el-input__inner {
  width: 120px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 30px;
  background: rgba(243, 247, 251, 1);
}

/* 3. 图标垂直居中 */
.times ::v-deep .el-input__icon {
  line-height: 24px;
}

/* ---------- 基础 ---------- */
.safety-dashboard {
  padding: 0 0 16px 16px;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-row,
.table-chart-row,
.chart-row {
  flex: 1;
  min-height: 0;
}



.card-subtitle-group {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
}

.card-subvalue-group {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;

}

.card-group {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: space-between;
}

.group-shadow {
  background: rgba(255, 255, 255, 0.15);
  height: 76px;
  /* 设计高锁死 */
  border-radius: 12px;
  padding: 13px 0px;
  display: flex;
  flex-direction: column;

  align-items: center;
  /* 新增：左右居中 */
  text-align: center;
  /* 文字也居中 */
  /* 宽度 = 190/1920 屏幕百分比 */
  width: calc(190 / 1920 * 100vw);
  flex-shrink: 0;
  /* 不允许被压缩 */
}

.group-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* 关键：左右间距 10 px */
}

.card-title {
  font-weight: 600;
  font-size: 1rem;
  white-space: wrap;
  margin-bottom: 5px;
  /* 不换行 */
  overflow: hidden;
  /* 溢出隐藏 */
  text-overflow: ellipsis;
  /* 省略号 */

}

.card-value {

  font-family: PingFang SC;
  font-weight: 600;
  font-style: Semibold;
  font-size: 20px;

}

.card-subvalue {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.unit {
  font-size: 14px;
  margin-left: 3px;
  font-weight: normal;
}

.cert-name {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.cert-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/* ---------- 表格 ---------- */
.data-card {
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep .el-table {
  border-radius: 6px 6px 0 0;
}

::v-deep .el-table__header th {
  background: #f5f7fa;
  font-weight: 500;
}

/* ---------- 图表 ---------- */
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.small-chart {
  width: 100%;
  height: 80%;
  margin-top: 0 !important;
  /* 去除图表顶部间距 */
  padding-top: 0 !important;
}

.chart-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  color: rgba(49, 61, 75, 1);

}

/* ---------- 饼图容器 ---------- */
.pie-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  /* 元素从顶部开始排列 */
}

/* ---------- 隐患明细标题 ---------- */
.detail-title {
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 5px;
}

.detail-row {
  margin-bottom: 0;
}



.card-title,
.card-subtitle-group {
  min-width: 0;
  /* 关键：允许压缩 */
  word-break: break-word;
  /* 中文断句 */
  white-space: normal;
  /* 允许换行 */
}

/* 行：flex 布局，间距用 gap 百分比 */
.card-row {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(20 / 1920 * 100vw);
  /* 20px→vw 单位，随屏宽变化 */
  height: 96px;
}

/* 列：等分剩余宽度 */
.card-col {
  flex: 1 0 0%;
  min-width: 0;
  /* 先不设最小宽度，由媒体查询接管 */
}

/* 卡片：高度 96，宽度按 447:96 比例随列宽缩放 */
.safety-card {
  border-radius: 12px;
  padding: 18px 15px;
  color: #fff;
  display: flex;
  padding: 18px calc(28 / 1920 * 100vw);
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  height: 96px;
  width: 100%;
  aspect-ratio: 447 / 96;
  /* 锁比例 */


  position: relative;
  overflow: hidden;
  /* 必须 */
}

.safety-card::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 上下左右全撑满 */
  background: url('~@/assets/images/111.png');
  opacity: 0.2;
  /* 透明度按需调 */
  pointer-events: none;
  background-size: 100% 100%;
  /* 只当背景，不拦截事件 */
  z-index: 1;
  /* 位于渐变下方 */
}

/* 让原有内容盖在背景之上 */
.safety-card>* {
  position: relative;
  z-index: 2;
}

@media (max-width: 1300px) {

  .card-title,.card-value,.card-subtitle-group {
    font-size: 14px !important;
  }
}

@supports not (aspect-ratio: 447 / 96) {
  .safety-card {
    width: 100%;
    height: 0;
    padding-top: calc(96 / 447 * 100%);
    position: relative;
  }

  .safety-card>* {
    position: absolute;
    inset: 0;
  }
}
</style>
